<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>商城</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.css" />
    <script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    <style type="text/css">
        li {
            list-style: none;
        }
        
        a {
            text-decoration: none;
            color: #000000;
        }
        
        .nav {
            width: 100%;
            margin: 0 auto;
        }
        
        .nav ul li {
            float: left;
            padding: 5px 50px;
            background-color: #009688;
        }
        
        .nav ul li a {
            padding: 5px 20px;
            color: #000000;
        }
        
        .nav ul li a:hover {
            background-color: #00F7DE;
        }
        
        .main ul li {
            padding: 5px 50px;
            background-color: #009688;
            width: 240px;
            text-align: center;
        }
        
        .main ul li a {
            padding: 5px 50px;
            color: #000000;
        }
        
        .main ul li a:hover {
            background-color: #00F7DE;
        }
        
        .tip {
            display: none;
            color: #000000;
            position: absolute;
            left: 290px;
            width: 600px;
            height: 200px;
            background-color: #1EA0FA;
        }
    </style>
</head>

<body>
    <header>
        <div class="nav">
            <ul class="">
                <li><a href="">天天特卖</a></li>
                <li><a href="">天天特卖</a></li>
                <li><a href="">天天特卖</a></li>
                <li><a href="">天天特卖</a></li>
            </ul>
        </div>
        <div class="main col-md-4">
            <ul id="ul1">
                <li><a href="">数码</a></li>
                <li><a href="">数码</a></li>
                <li><a href="">数码</a></li>
                <li><a href="">数码</a></li>
            </ul>
        </div>
        <div class="tip">
            <div class="sub-row col-md-4">
                <span class="bold mr10">手机通讯：</span>
                <a href="">手机</a>
                <span class="ml10 mr10">/</span>
                <a href="">手机维修</a>
                <span class="ml10 mr10">/</span>
                <a href="">以旧换新</a>
            </div>
            <div class="sub-row col-md-6">
                <span class="bold mr10">手机通讯：</span>
                <a href="">手机</a>
                <span class="ml10 mr10">/</span>
                <a href="">手机维修</a>
                <span class="ml10 mr10">/</span>
                <a href="">以旧换新</a>
            </div>
            <div class="sub-row col-md-6">
                <span class="bold mr10">手机通讯：</span>
                <a href="">手机</a>
                <span class="ml10 mr10">/</span>
                <a href="">手机维修</a>
                <span class="ml10 mr10">/</span>
                <a href="">以旧换新</a>
            </div>
        </div>


    </header>
</body>

</html>
<script type="text/javascript">
    $(() => {
        $("#ul1 li").on("mouseenter", function() {
            $(".tip").show()
        })
        $("#ul1 li").on("mouseleave", function() {
            $(".tip").hide()
        })

    })
</script>